<template>
  <div class="app-container jsbos-flex-main mcConfig">
    <el-button
      type="primary"
      class="saveBtn"
      :loading="btnLoading"
      @click="submitForm()"
      >保存
    </el-button>
    <el-tabs
      v-model="activeName"
      type="border-card"
      class="jsbos-el_tabs"
      v-loading="elTabsLoading"
    >
      <el-tab-pane label="黑名单" name="blacklist">
        <el-alert
          title="注意：设为黑名单后该用户消息不下发"
          type="warning"
          :closable="false"
          show-icon
        />
        <BlacklistSetting
          ref="blacklistSettingRef"
          :userIds="baseForm.mcBlacklist"
          @refreshInit="initData"
        ></BlacklistSetting>
      </el-tab-pane>
      <el-tab-pane label="敏感词" name="sensitive">
        <el-alert
          title="注意：敏感词做脱敏处理"
          type="warning"
          :closable="false"
          show-icon
        />
        <SensitiveSetting
          ref="sensitiveSettingRef"
          :words="baseForm.mcSensitive"
          @refreshInit="initData"
        ></SensitiveSetting>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getConfigListByCategory,
  updateSystemConfig,
} from "@/api/system/sysConfig";
import BlacklistSetting from "@/views/message/mcConfig/tabs/blacklistSetting.vue";
import SensitiveSetting from "@/views/message/mcConfig/tabs/sensitiveSetting.vue";

export default {
  name: "message-mcConfig",
  components: {
    BlacklistSetting,
    SensitiveSetting,
  },
  data() {
    return {
      elTabsLoading: false,
      btnLoading: false,
      activeName: "blacklist",
      baseForm: {},
    };
  },
  watch: {
    activeName(val) {
      if (val === "blacklist") {
      }
      if (val === "sensitive") {
      }
    },
  },
  created() {
    this.initData();
  },
  computed: {
    McConfig() {
      return {
        category: "McConfig",
        list: [
          {
            name: "消息接收人黑名单",
            key: "mcBlacklist",
            value: JSON.stringify(this.$refs.blacklistSettingRef.mcBlacklist),
          },
          {
            name: "消息敏感词",
            key: "mcSensitive",
            value: JSON.stringify(this.$refs.sensitiveSettingRef.mcSensitive),
          },
        ],
      };
    },
  },
  methods: {
    initData() {
      this.elTabsLoading = true;
      this.$nextTick(() => {
        getConfigListByCategory("McConfig")
          .then((res) => {
            for (let i = 0; i < res.data.length; i++) {
              this.$set(
                this.baseForm,
                res.data[i].keyName,
                res.data[i].keyValue
                  ? JSON.parse(res.data[i].keyValue)
                  : undefined
              );
            }
            console.log("------", this.baseForm);
            this.elTabsLoading = false;
          })
          .catch(() => {
            this.elTabsLoading = false;
          });
      });
    } /**保存 */,
    submitForm() {
      this.btnLoading = true; // 基础设置
      updateSystemConfig(this.McConfig)
        .then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1500,
            onClose: () => {
              this.btnLoading = false;
            },
          });
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.mcConfig {
  padding: 0;
  .el-tabs {
    height: 100%;
  }
  .saveBtn {
    position: absolute;
    right: 28px;
    top: 4px;
    z-index: 1;
  }
  >>> .el-tabs__content {
    height: calc(100% - 39px);
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
